Skip to content

Latest commit

 

History

History
153 lines (68 loc) · 8.78 KB

04-Projeto de Interface.md

File metadata and controls

153 lines (68 loc) · 8.78 KB

Projeto de Interface

Nesta seção, é apresentada a visão geral da interação do usuário pelas telas do sistema e protótipo interativo das telas com as funcionalidades que fazem parte do sistema (wireframes).

Diagrama de Fluxo

O diagrama apresenta o estudo do fluxo de interação do usuário com o sistema. Antes de realizar cadastro e login, o usuário possui acesso à homepage e às páginas com informações sobre o aplicativo. Após cadastro e login, o fluxo na aplicação segue como descrito no diagrama abaixo:

Screenshot 2024-06-12 at 19 16 00

Wireframes

Home page sem login

Ao acessar nossa aplicação sem estar logado, o usuário visualizará a página inicial conforme mostrado na imagem abaixo. Se optar por se cadastrar, basta clicar no botão de cadastro para ser redirecionado à tela correspondente.

Caso clique em "Encontrar um par ideal", ícone do usuário ou notificações, será direcionado à tela de login. O ícone de casa permite que o usuário retorne à tela principal ao clicar nele, enquanto o ícone de livro direciona para a tela "Sobre Nós".

image

Home page com login

Na tela com o usuário logado, ele verá o nome dele no canto superior direito. O botão no banner roxo conterá o nome do pet do usuário e abaixo o botão "Buscar", que redireciona para a tela de busca dos pets.

Caso clique em algum card da seção "Encontre um par ideal", será redirecionado para a tela de informações desse pet. Se clicar em "Ver mais", irá para a tela de busca onde estarão listados todos os pets.

Ao clicar no ícone de notificações, será redirecionado para essa página e, ao clicar no ícone de usuário, será redirecionado para a área do usuário.

image

Cadastro

Na tela de cadastro, temos os seguintes campos: nome completo, data de nascimento, email, contato do WhatsApp, senha e confirmar senha.

image

Login

A tela de login possui os campos de email e senha. Caso o usuário ainda não tenha uma conta, o link "Cadastre-se aqui" redireciona para a tela de cadastro.

image

Cadastro pet

Na página de cadastro do pet, o usuário deverá fazer o upload de uma imagem, e fornecer as seguintes informações: nome do pet, idade, cidade, sexo, cor, raça, porte e uma breve descrição sobre ele.

image



Tela busca

Na página de busca/match, por padrão, os cards do sexo oposto serão renderizados antes que o usuário realize alguma busca. O usuário pode pesquisar de acordo com suas preferências, por exemplo: "Poodle marrom em Santos, São Paulo", e todos os perfis cadastrados com essas características serão exibidos.

Haverá ícones interativos para aprimorar a experiência do usuário:

  • Ícone de coração (Curtir): indica interesse no perfil exibido;
  • Ícone "x" (recusar): indica falta de interesse no perfil exibido;
  • Ícone azul: permite visualizar mais informações sobre o pet, redirecionando o usuário para a tela de informações.

Os perfis serão exibidos em cards, um abaixo do outro.

image

Página de notificações com match

Na página de notificações, o usuário verá todos os matches que possui e a data em que ocorreram. Ao clicar em cada um, será redirecionado para a tela de informações desse pet. Abaixo, haverá uma lupa de pesquisa e os cards de "Encontre um par ideal", caso o usuário queira continuar na busca.

image

Página de notificações sem match

Na página sem notificações, o usuário verá a frase "Seu perfil ainda não foi curtido de volta." Abaixo disso, haverá a barra de pesquisa e cards para procurar mais pets.

image



Página de informações do pet

Na tela de informações do pet, será possível visualizar todas as informações cadastradas dele, incluindo nome, cidade, sexo e uma breve descrição sobre ele. Abaixo, será possível ver o nome do tutor. O ícone do WhatsApp só aparecerá quando houver um match.

image

Ao clicar no ícone, uma janela popup aparecerá para permitir que o usuário avalie sua experiência, sendo esta avaliação opcional. Em seguida, o usuário será redirecionado para o aplicativo do WhatsApp, onde poderá iniciar uma conversa.

image

Favoritos

Essa tela contém todos os perfis que o usuário curtiu.

image

Área do usuário

Essa tela contém um link para o usuário visualizar o perfil do seu pet, editar os dados do pet, editar os seus próprios dados, excluir a conta e um botão de logout para sair da aplicação.

image

Editar dados cadastrais usuário

Na página de editar dados do usuário, ele poderá atualizar todas as suas informações cadastradas, incluindo nome, data de nascimento, email, contato do WhatsApp, e também poderá alterar sua senha. Será necessário confirmar a senha antiga para concluir a alteração.

image

Editar dados cadastrais pet

Na página de editar dados do pet, o usuário poderá alterar todos os dados cadastrados do seu pet, incluindo nome, idade, cidade, sexo, cor, raça , porte e sobre, além de poder trocar a imagem, caso deseje.

image

Página sobre

Esta página fornece informações sobre o aplicativo e seu funcionamento. Abaixo, o usuário encontrará um link que o redirecionará para a página de Termos e Condições, e outro para a página de Política de Privacidade.

Se o usuário estiver logado, ele verá o botão "Buscar" e seu nome no canto superior. Se não estiver logado, apenas o botão "Cadastrar" será exibido.

image

Termos e condições

A tela de termos e condições contém as regras e regulamentos que os usuários concordam em seguir ao usar nosso aplicativo.

image

Política de privacidade

A tela de política de privacidade contém informações sobre como os dados pessoais dos usuários são coletados, usados, armazenados e protegidos pela nossa aplicação.

image